<template>
  <a-card class="ax__template AxFiles" :body-style="bodyStyle" v-if="!filesShowForm">
    <a-flex vertical class="h-100">
      <!-- 顶部筛选，查询选项 -->
      <HeadVue />
      <!-- 表单数据 -->
      <div class="data__content" data-selection-area>
        <TableVue v-if="filesTable.viewMode === 'table'" data-selection-exclude></TableVue>
        <CardVue v-else></CardVue>
      </div>
      <!-- 底部分页信息 -->
      <FooterVue></FooterVue>
    </a-flex>
  </a-card>
  <AXForm v-else class="ax__template AxFiles" />
</template>

<script setup lang="ts">
import { bodyStyle } from '@/global/config/gen';
import { filesList } from './data/curd';
import { filesResetForm, filesShowForm } from './data/form';
import { fetchFilesOptions } from './data/options';
import { filesTable } from './data/table';
import AXForm from './form/AXForm.vue';
import FooterVue from './pages/components/AXFooter.vue';
import HeadVue from './pages/components/AXHead.vue';
import CardVue from './pages/card/AxCard.vue';
import TableVue from './pages/table/AxTable.vue';

onMounted(async () => {
  await fetchFilesOptions();
  await filesList();
});

onUnmounted(() => {
  filesShowForm.value = false;
  filesResetForm();
  filesTable.value.reset();
});
</script>

<style lang="scss" scoped></style>
